﻿/* SPUIKit - SPUIKit.css */
/* CSS for SPUIKit styles */

/*---- CSS Grid For Publishing ----*/
.col-container, body.publishing .footer {
	width: 940px;
	margin: 0 auto;
}
.col-60, .col-140, .col-220, .col-300, .col-380, .col-460, 
.col-540, .col-620, .col-700, .col-780, .col-860 {
	float: left;
	display: inline;
	margin-left: 20px;
}
.col-60 {
	width: 60px;
}
.col-140 {
	width: 140px;
}
.col-220 {
	width: 220px;
}
.col-300 {
	width: 300px;
}
.col-380 {
	width: 380px;
}
.col-460 {
	width: 460px;
}
.col-540 {
	width: 540px;
}
.col-620 {
	width: 620px;
}
.col-700 {
	width: 700px;
}
.col-780 {
	width: 780px;
}
.col-860 {
	width: 860px;
}
.first {
	margin-left: 0;
	clear: left;
}
/*---- EOF CSS Grid for publishing ----*/
/*---- CSS Grid for non publishing ----*/
.grid-container{
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
    width: 100%;
    float: right;
}
.grid-0, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
}
.grid-0 { /* Full width */
    width: 98%;
}
.grid-1 { /* 1/4 */
    width: 23%;
}
.grid-2 { /* 1/3 */
    width: 31.333%;
}
.grid-3 { /* 1/2 */
    width: 48%;
}
.grid-4 {
    width: 39.666%;
}
.grid-5 { 
    width: 56.333%;
}
.grid-6 {
    width: 73%;
}
/*---- EOF CSS Grid for non publishing ----*/
/* Clearfix Hack */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	line-height: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix {
	zoom: 1;
} /* IE6 */
*:first-child+html .clearfix {
	zoom: 1;
} /* IE7 */

.clearfix {
	display: block;
}
   
@media screen and (-webkit-min-device-pixel-ratio:0){
    .clearfix {display: inherit;}
}

html[xmlns] .clearfix {
	display: block;
}
/* EOF - clearfix Hack */
/*---- SPUIKit Tabs ----*/
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}
/*---- EOF - SPUIKit Tabs ----*/
